<template>
    <div class="flv-container">
        <video
            ref="videoPlayer"
            :id="id"
            :class="className"
            :width="width"
            :height="height"
            :muted="muteds"
            :poster="poster"
            :controls="controls"
            disablePictureInPicture
            controlslist="nodownload"
            oncontextmenu="return false;"
        ></video>
    </div>
</template>
<script>
// import '../../../public/js/flv.min.js';
import  '@/assets/js/flv.min.js';
export default {
    props: {
        playerOption: {
            type: Object,
            required: true,
            default() {
                return {};
            }
        },
        id: {
            type: String,
            default: "flvPlayer"
        },
        className: {
            type: String,
            default: "playerClass"
        },
        width: {
            type: String,
            default: "100%"
        },
        height: {
            type: String,
            default: "100%"
        },
        poster: {
            type: String,
            default: ""
        },
        controls: {
            type: Boolean,
            default: true
        },
        muteds: {
            type: Boolean,
            default: false
        },
    },
    data() {
        return {
            player: null,
            settings:{
                enableWorker: false,
                enableStashBuffer: false,
                stashInitialSize: 1,
                lazyLoad: false,
                lazyLoadMaxDuration: 1,
                lazyLoadRecoverDuration: 1,
                deferLoadAfterSourceOpen: false,
                autoCleanupMaxBackwardDuration: 60,
                autoCleanupMinBackwardDuration: 30,
                statisticsInfoReportInterval: 1000,
                fixAudioTimestampGap: false,
                ENABLE_CALLBACK: false,
                ENABLE_WARN: false,
                autoCleanupSourceBuffer: true,//自动清除缓存
                enableDurationMonitor: true,  // true表示监测当前直播流延时，当发现延时过大时，主动追赶
                enableVideoFrozenMonitor: true, // 监测视频解码是否停滞（画面卡停），当因为某些原因导致无法解码时，将上报VIDEO_FROZEN事件，收到后建议重拉流
                decreaseDurationStep: 2,  // 每次追赶至缓冲区末尾之前的多少秒
                audioGainLevel: 2,
            },
            isPaused:false,
            paramsData: { //修改后的
              type: this.playerOption.type,
              url: this.playerOption.url,
              hasAudio: this.playerOption.status_stream_audio,
              hasVideo: this.playerOption.status_stream,
              isLive: true,
              cors: true,
            }
        };
    },
    mounted() {
        this.init();
    },
    watch: {
        playerOption: {
            handler(newVal, oldVal){
                this.player && this.player.destroy();
                this.paramsData.segments && (this.paramsData.segments = undefined)
                this.init();
            },
            deep:true,
        },
    },
    beforeDestroy() {
        if (!this.player) {
            return;
        }
        this.player.pause();
        this.player.unload();
        this.player.detachMediaElement();
        this.paramsData.segments && (this.paramsData.segments = undefined)
        this.player.destroy();
        this.player = null;
    },
    methods: {
        init() {
			if (flvjs.isSupported()) {
                var videoElement = document.getElementById(this.id);
                videoElement.volume = 0.5
                // console.log(this.paramsData,'~~~~~');
                this.player = flvjs.createPlayer(this.paramsData);
				this.player.attachMediaElement(videoElement);
                this.player.load();
                // this.player.play();

                this.$refs.videoPlayer.onplay=e=>{
                    this.playListener();
                }
                this.$refs.videoPlayer.onpause=e=>{
                    this.pauseListener();
                }
                this.$refs.videoPlayer.onerror=e=>{
                    console.log(e, "直播出错了")
                    this.getTime();
                }
                this.$refs.videoPlayer.onabort=e=>{
                    this.getTime();
                    //console.log("直播中止了")
                }
                this.$refs.videoPlayer.onstalled=e=>{
                    this.getTime();
                    //console.log("媒体数据不可用")
                }
                this.$refs.videoPlayer.onsuspend=e=>{
                    this.getTime();
                    //console.log("媒体数据加载被阻止")
                }
                this.$refs.videoPlayer.ontimeupdate=e=>{
                    // this.getTime();
                    // //console.log(e,"播放中")
                }
                this.$refs.videoPlayer.oncanplay=e=>{
                    if(e.target.paused){
                        this.player.play();
                    }
                    //console.log(e.target.paused,"oncanplay")
                }

			}
        },
        getTime(){
            let date = new Date();
            let hour = date.getHours();
            let minute = date.getMinutes();
            let second = date.getSeconds();
            //console.log(`${hour}:${minute}:${second}`)
        },
        playListener(){
            if(this.isPaused){
                //console.log('点击了播放按钮,重置播放器')
                this.player && this.player.destroy();
                this.paramsData.segments && (this.paramsData.segments = undefined)
                this.init();
                this.isPaused = false;
            }
        },
        pauseListener(){
            this.isPaused = true;
            this.player.pause();
        },
    }
};
</script>
<style lang="scss">
.flv-container {
    display: inline-block;
    width: 100%;
    height: 100%;
    //    进度条
    video::-webkit-media-controls-timeline {
         display: none;
    }
    video::-ms-media-controls-timeline {
         display: none;
    }
    video::-o-media-controls-timeline {
         display: none;
    }
    video::-moz-media-controls-timeline {
         display: none;
    }
    //去掉边框蓝色线
    video{
        outline:none;
        object-fit: fill;
        background-color: #fff;
    }
}
</style>
